/<template>
  <div class="conten">
    <el-form
      ref="form"
      :model="fromData"
      :rules="rules"
      label-width="110px"
      class="form"
    >
      <el-form-item
        label="定价"
        prop="pay_coin"
      >
        <div class="payinput rowFlex">
          <el-input
            v-model="fromData.pay_coin"
            clearable
            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
            style="width:200px;"
          ></el-input>
          <div class="unit">虚拟币/集</div>
        </div>
      </el-form-item>
      <!-- <el-form-item label="开始付费剧集" prop="start_pay_chapter">
        <el-input v-model="fromData.start_pay_chapter" style="width:180px;" type="number" min="1" @input="oninput"></el-input>
      </el-form-item> -->
      <el-form-item
        label="开始付费剧集"
        prop="start_pay_chapter"
        class="chapter"
      >
        <el-select
          v-model="fromData.start_pay_chapter"
          clearable
          placeholder="请选择短剧"
          style="width:210px;"
        >
          <el-option
            v-for="item in chapterList"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { POST_mini_app_playlet_paymentSave } from '@/api/appContent/theater'
import { commonData } from '@/api/common'
import { validateCoin, validateStart } from '@/utils/index'
export default {
  name: 'PaySet',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      fromData: {
        mini_app_id: localStorage.mini_app_id,
        start_pay_chapter: '',
        pay_coin: '',
        playlet_id: ''
      },
      chapterList: [],
      rules: {
        pay_coin: [{ required: true, message: '输入定价', trigger: 'blur' }],
        start_pay_chapter: [
          { required: true, message: '收费剧集最小为1', trigger: 'blur' },
          { required: true, validator: validateStart, trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.fromData.playlet_id = this.data.id
    this.rules.pay_coin.push({ required: true, validator: validateCoin, trigger: 'blur', playlet_id: this.fromData.playlet_id })
    this.fromData.pay_coin = this.data.pay_coin
    this.fromData.start_pay_chapter = this.data.start_pay_chapter
    this.reqeustChapter(this.data.id)
  },
  methods: {
    reqeustChapter(value) {
      commonData({ type: 'playletChapter', value: value }).then((res) => {
        if (res.status_code === 1) {
          this.chapterList = res.data.data
        }
      })
    },
    oninput() {
      this.fromData.start_pay_chapter <= 0 ? (this.fromData.start_pay_chapter = 1) : null
    },
    close() {
      this.$emit('cancel')
    },
    async onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          POST_mini_app_playlet_paymentSave(this.fromData).then((res) => {
            if (res.status_code == 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.conten {
  .form {
    padding: 20px;
    width: 400px;
  }
  .payinput {
    display: flex;
    .unit {
      display: flex;
      width: 70px;
      margin-left: 10px;
    }
  }
}
</style>